<template>
  <div class="full-screen">
    <nav-bar>
      <span slot="text">添加地址</span>
    </nav-bar>
    <form>
      <li class="lili">
        <label>联系人：</label>
        <input type="text" v-model.trim="addressForm.user_name" placeholder="收货人姓名" />
        <div class="sex">
          <p @click="addressForm.sex = 1">
            <span>先生</span>
            <input
              type="radio"
              name="sex"
              :checked="addressForm.sex == 1 ? 'checked' : ''"
            />
          </p>
          <p @click="addressForm.sex = 0">
            <span>女士</span>
            <input
              type="radio"
              name="sex"
              :checked="addressForm.sex == 0 ? 'checked' : ''"
            />
          </p>
        </div>
      </li>
      <li>
        <label>手机号：</label>
        <input
          type="text"
          v-model.trim="addressForm.phone"
          placeholder="收货人手机号码"
        />
      </li>
      <li>
        <label>收货地址：</label>
        <input
          type="text"
          placeholder="选择收货地址"
          v-model="addressForm.address"
          @click="$router.push('/selectAddress')"
        />
      </li>
      <li>
        <label>详细地址：</label>
        <input
          type="text"
          v-model="addressForm.address_detail"
          placeholder="输入详细地址"
        />
      </li>
      <li>
        <label>标签：</label>
        <div class="tag">
          <span
            :class="{ active: addressForm.tag == 1 }"
            @click="addressForm.tag = 1"
            >家</span
          >
          <span
            :class="{ active: addressForm.tag == 2 }"
            @click="addressForm.tag = 2"
            >公司</span
          >
          <span
            :class="{ active: addressForm.tag == 3 }"
            @click="addressForm.tag = 3"
            >学校</span
          >
        </div>
      </li>
    </form>
    <button class="btn" @click="submitForm">添加</button>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import { newAddress } from '@/network/getData';

export default {
  data() {
    return {
      addressForm: {
        user_name: '',
        phone: null,
        address: '',
        address_detail: '',
        tag: null,
        sex: null
      }
    };
  },
  computed: {
    ...mapState(['address_name', 'userInfo'])
  },
  methods: {
    submitForm() {
      try {
        if (this.addressForm.user_name === '') {
          throw new Error('请输入收货人姓名');
        } else if (this.addressForm.sex === '') {
          throw new Error('请选择性别');
        } else if (this.addressForm.phone === '') {
          throw new Error('请输入收货人手机号码');
        } else if (this.addressForm.address === '') {
          throw new Error('请输入收货地址');
        } else if (this.addressForm.address_detail === '') {
          throw new Error('请输入地址详细');
        }
      } catch (err) {
        this.$message({ message: err.message });
      }
      newAddress(this.userInfo.id, this.addressForm).then(res => {
        if (res.code === 200) {
          this.$router.go(-1);
        }
      });
    }
  },
  watch: {
    address_name(value) {
      this.addressForm.address = value;
    }
  }
};
</script>

<style lang="less" scoped>
form {
  padding-top: 60px;
  background-color: #fff;
  li {
    height: 35px;
    line-height: 35px;
    padding: 0 10px;
    font-size: var(--font-size);
    border-bottom: 1px solid #eee;
  }
  label {
    display: inline-block;
    width: 100px;
    color: #222;
  }
  .tag {
    display: inline-block;
    span {
      padding: 2px 10px;
      margin-right: 10px;
      font-size: 13px;
      color: #333;
      border: 1px solid #eee;
      border-radius: 5px;
    }
    .active {
      border-color: var(--color-base);
    }
  }
  .lili {
    position: relative;
    .sex {
      position: absolute;
      top: 0;
      right: 0;
      display: flex;
      p {
        display: flex;
        align-items: center;
        margin-right: 10px;
      }
      input {
        margin-left: 3px;
      }
    }
  }
}
.btn {
  display: block;
  width: 95%;
  line-height: 30px;
  border-radius: 5px;
  margin: 15px auto;
  background-color: var(--color-base);
}
</style>
